<template>
	<view class="pageBox" :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				申请运营中心
			</view>
			<view class="right" @click="onRight">
				运营中心说明
			</view>
		</view>
		<view class="iptBox flex-between">
			<view class="province">
				<uni-data-select v-model="province.value" :localdata="provinceList" @change="change"></uni-data-select>
			</view>
			<button class="recordBtn" :plain="true" @click="onRecordBtn">申请记录</button>
		</view>

		<view class="city">
			<uni-data-select v-model="city.value" :localdata="cityList" @change="change2"></uni-data-select>
		</view>
		<input type="text" class="ipt" placeholder="姓名" v-model="form.username">
		<input type="text" class="ipt" placeholder="电话" v-model="form.mobile">

		<button :plain="true" :class="[disabled ? 'btn btn2' : 'btn']" @click="onBtn">确认申请</button>
	</view>
</template>

<script>
	import areaData from "../utils/area.js"
	export default {
		data() {
			return {
				statusBarHeight: "",
				form: {
					username: "",
					mobile: "",
				},
				provinceList: [],
				province: {
					value: "",
					text: ""
				},
				cityList: [],
				city: {
					value: "",
					text: ""
				},
				disabled: false,
			}
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;
			// 本地行政数据初始化
			areaData.forEach((item, index) => {
				this.provinceList[index] = {
					value: item.id,
					text: item.name,
					children: item.children
				};
				if (index == 0) {
					this.province = {
						value: item.id,
						text: item.name,
					};
					item.children.forEach((item2, index2) => {
						this.cityList[index2] = {
							value: item2.id,
							text: item2.name,
							children: item2.children
						}
						if (index2 == 0) {
							this.city = {
								value: item2.id,
								text: item2.name,
							};
						}
					});
				}
			})
			// // console.log(this.provinceList,this.cityList)
		},
		onShow() {
			this.getStatus();
		},
		methods: {
			onRight() {
				uni.navigateTo({
					url: '/serviceCenter/serviceNote?from=申请运营中心&type=2'
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			onRecordBtn() {
				uni.navigateTo({
					url: '/serviceCenter/serviveRecord?from=申请运营中心&type=2'
				})
			},
			change(e) {
				// // console.log("省", e)
				this.provinceList.forEach((item, index) => {
					if (item.value == e) {
						this.province = {
							text: item.text,
							value: item.value,
						}
						// // console.log(item, this.province)
						item.children.forEach((item2, index2) => {
							this.cityList[index2] = {
								value: item2.id,
								text: item2.name,
								children: item2.children
							}
							if(index2 == 0) {
								this.city = {
									text: item2.name,
									value: item2.id,
								}
							}
						})
					}
				})
				// // console.log(this.cityList, this.city)
			},
			change2(e) {
				// // console.log("市", e)
				this.cityList.forEach((item) => {
					if (item.value == e) {
						this.city = {
							text: item.text,
							value: item.value,
						}
						return;
					}
				})
				// // console.log(this.city)
			},
			onBtn() {
				if (!this.form.username) {
					uni.showToast({
						icon: "none",
						title: "请输入姓名",
						duration: 1500
					})
					return;
				}
				
				if (!this.form.mobile) {
					uni.showToast({
						icon: "none",
						title: "请输入电话",
						duration: 1500
					})
					return;
				}
				this.$post({
					module: "User",
					interface: "3002",
					data: {
						realName: this.form.username,
						mobile: this.form.mobile,
						province_id: this.province.value,
						city_id: this.city.value,
						type: "2",
					},
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: "操作成功",
						duration: 1500
					})
					setTimeout(() => {
						this.goBack();
					}, 1000)
				})
			},
			// 获取运营中心申请信息
			getStatus() {
				this.$post({
					module: "User",
					interface: "3003",
					data: {
						type: "2",
					},
				}).then(res => {
					if(res.status === '') {
						this.disabled = false;
					} else if(res.status == 0 || res.status == 1) {
						this.disabled = true;
					} else {
						this.disabled = false;
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		padding: 0 32rpx;
		.topHead {
			background-color: #ffffff;
			height: 88rpx;
			width: 100%;
			padding: 0 32rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 3;
		
			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				position: absolute;
				top: 22rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}
		
			.right {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #F2615F;
			}
		}

		/deep/.uni-stat__select {
			padding: 0;
		}

		/deep/.uni-select {
			border: 0;
		}

		/deep/.uni-stat__actived {
			outline: none;
		}


		.iptBox {
			.province {
				width: 256rpx;
				height: 80rpx;
				background: #f9f9f9;
				border-radius: 16rpx;

				/deep/.uni-select__input-text {
					width: 200rpx;
				}
			}

			.recordBtn {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 44rpx;
				padding: 0;
				margin: 0;
				border: none;
			}
		}

		.city {
			width: 372rpx;
			height: 80rpx;
			background: #f9f9f9;
			border-radius: 16rpx;
			margin-top: 28rpx;

			/deep/.uni-select__input-text {
				width: 322rpx;
			}
		}

		.ipt {
			width: 100%;
			height: 80rpx;
			background: #f9f9f9;
			border-radius: 16rpx;
			margin-top: 28rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 44rpx;
			padding-left: 16rpx;
		}

		.btn {
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			width: 606rpx;
			height: 104rpx;
			background: #F2615F;
			border-radius: 52rpx;
			border: none;
			padding: 0;
			margin: 236rpx auto 0;
		}
		.btn2 {
			background: #bebebe;
		}
	}
</style>
